<template>
  <el-dialog :visible.sync="isRoleDialog" title="编辑" left @close="cancelBtn">
    <!-- 新建用户 -->
    <el-form ref="rulesForm" label-width="80px" :rules="rules" :model="roleForm">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="roleForm.username" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="roleForm.email" />
      </el-form-item>
      <el-form-item label="头像">
        <PhotoUpload ref="avatorFile" v-model="roleForm.image" :mutiple="true" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancelBtn">取 消</el-button>
      <el-button type="primary" @click="btnOk">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getUsersById, setUsers } from '@/api/employees'
export default {
  props: {
    isRoleDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      roleForm: {
        'username': 'myName',
        'email': 'myemailaddress@abc.com',
        'image': 'https://img1.baidu.com/it/u=3218210594,554121318&fm=26&fmt=auto'
      },
      rules: {
        username: [
          { required: true, message: '请输入标题名称', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { pattern: '^\\s*\\w+(?:\\.{0,1}[\\w-]+)*@[a-zA-Z0-9]+(?:[-.][a-zA-Z0-9]+)*\\.[a-zA-Z]+\\s*$', message: '请输入正确的邮箱' }
        ]
      }
    }
  },
  methods: {
    //   获取员工列表
    async getEmploy(data) {
      const res = await getUsersById(data.id)
      this.roleForm = { ...res }
      this.$refs.avatorFile.fileList = [{ url: this.roleForm.image }]
    },
    cancelBtn() {
      this.roleForm = {
        'username': '',
        'email': '',
        'image': ''
      }
      this.$parent.isRoleDialog = false
      this.$refs.avatorFile.fileList = []
      this.$refs.rulesForm.resetFields()
    },
    async btnOk() {
      try {
        this.roleForm.image = this.$refs.avatorFile.fileList[0].url
        console.log(60, this.roleForm)
        await setUsers(this.roleForm)
        this.$message({
          message: '编辑成功',
          type: 'success'
        })
        this.$parent.isRoleDialog = false
        this.$parent.getEmploy()
      } catch (error) {
        this.$message({
          message: '请等待图片上传完成',
          type: 'info'
        })
      }
    }
  }
}
</script>

<style>

</style>
